<template>
    <el-input v-model="inputValue" v-bind="Props" class="custom-input"></el-input>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { InputProps } from 'element-plus';
interface CustomInputProps extends InputProps {
    modelValue: string;
}
const inputValue = computed({
    get: () => {
        return props.modelValue;
    },
    set: (value) => {
        emit('update:modelValue', value);
    }
})
const props = defineProps<CustomInputProps>();
const emit = defineEmits(['update:modelValue']);
const Props = computed(() => {
    const { modelValue, ...rest } = props;
    return rest;
})
</script>

<style lang="less" scoped>
.custom-input {
    --el-input-bg-color: var(--border-color);
    --el-input-text-color: var(--main-text-color);
    --el-input-border-color: var(--border-color);
    --el-input-focus-border-color: var(--theme-color);
}
</style>